<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>供应商列表</title>
	<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
	<script src="js/vue.js"></script>
	<script src="element-ui/lib/index.js"></script>
	<script src="js/axios-0.18.0.js"></script>
	<script src="js/server.js"></script>
</head>
<body>
<div id="div">
	<!-- 查询表单 -->
	<el-form :inline="true" :model="searchFrom" class="demo-form-inline">
		<el-form-item label="供应商编码">
			<el-input v-model="searchFrom.proCode"></el-input>
		</el-form-item>
		<el-form-item label="供应商名称">
			<el-input v-model="searchFrom.proName"></el-input>
		</el-form-item>
		<el-form-item>
			<el-button type="primary" @click="doSearch">查询</el-button>
		</el-form-item>
	</el-form>

	<!-- 表格列表 -->
	<el-table :data="tableData" style="width: 100%">
		<el-table-column type="index" label="序号" width="50"></el-table-column>
		<el-table-column prop="proCode" label="供应商编码" width="120"></el-table-column>
		<el-table-column prop="proName" label="供应商名称" width="180"></el-table-column>
		<el-table-column prop="proContact" label="供应商联系人"></el-table-column>
		<el-table-column prop="proPhone" label="联系电话"></el-table-column>
		<el-table-column prop="proFax" label="传真"></el-table-column>
		<el-table-column prop="creationDate" label="创建时间"></el-table-column>
		<el-table-column label="操作" width="220">
			<template slot-scope="scope">
				<el-button size="mini" @click="handleShow(scope.$index, scope.row)">查看</el-button>
				<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
				<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
			</template>
		</el-table-column>
	</el-table>

	<!-- 分页条 -->
	<div class="block" style="margin-top: 10px;">
		<el-pagination
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="pagination.currentPage"
				:page-sizes="[3, 5, 10]"
				:page-size="pagination.pageSize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="pagination.total">
		</el-pagination>
	</div>


	<!-- 查看对话框 -->
	<el-dialog title="查看供应商信息" :visible.sync="showFormVisible">
		<el-form :model="showForm">
			<el-form-item label="供应商编码" :label-width="formLabelWidth">
				<el-input v-model="showForm.proCode" disabled></el-input>
			</el-form-item>
			<el-form-item label="供应商名称" :label-width="formLabelWidth">
				<el-input v-model="showForm.proName" disabled></el-input>
			</el-form-item>
			<el-form-item label="供应商详细描述" :label-width="formLabelWidth">
				<el-input type="textarea" v-model="showForm.proDesc" disabled></el-input>
			</el-form-item>
			<el-form-item label="供应商联系人" :label-width="formLabelWidth">
				<el-input v-model="showForm.proContact" disabled></el-input>
			</el-form-item>
			<el-form-item label="联系电话" :label-width="formLabelWidth">
				<el-input v-model="showForm.proPhone" disabled></el-input>
			</el-form-item>
			<el-form-item label="地址" :label-width="formLabelWidth">
				<el-input type="textarea" v-model="showForm.proAddress" disabled></el-input>
			</el-form-item>
			<el-form-item label="传真" :label-width="formLabelWidth">
				<el-input v-model="showForm.proFax" disabled></el-input>
			</el-form-item>
			<el-form-item label="创建时间" :label-width="formLabelWidth">
				<el-input v-model="showForm.creationDate" disabled></el-input>
			</el-form-item>
		</el-form>
		<div slot="footer" class="dialog-footer">
			<el-button type="primary" @click="showFormVisible = false">关闭</el-button>
		</div>
	</el-dialog>

	<!-- 编辑对话框 -->
	<el-dialog title="编辑供应商信息" :visible.sync="editFormVisible">
		<el-form :model="editForm" :rules="rules" ref="editForm">
			<el-form-item label="供应商编码" prop="proCode" :label-width="formLabelWidth">
				<el-input v-model="editForm.proCode" disabled ></el-input>
			</el-form-item>
			<el-form-item label="供应商名称" prop="proName" :label-width="formLabelWidth">
				<el-input v-model="editForm.proName"></el-input>
			</el-form-item>
			<el-form-item label="供应商详细描述" prop="proDesc" :label-width="formLabelWidth">
				<el-input type="textarea" v-model="editForm.proDesc"></el-input>
			</el-form-item>
			<el-form-item label="供应商联系人" prop="proContact" :label-width="formLabelWidth">
				<el-input v-model="editForm.proContact"></el-input>
			</el-form-item>
			<el-form-item label="联系电话" prop="proPhone" :label-width="formLabelWidth">
				<el-input v-model="editForm.proPhone"></el-input>
			</el-form-item>
			<el-form-item label="地址" prop="proAddress" :label-width="formLabelWidth">
				<el-input type="textarea" v-model="editForm.proAddress"></el-input>
			</el-form-item>
			<el-form-item label="传真" prop="proFax" :label-width="formLabelWidth">
				<el-input v-model="editForm.proFax"></el-input>
			</el-form-item>
		</el-form>
		<div slot="footer" class="dialog-footer">
			<el-button @click="editFormVisible = false">取消</el-button>
			<el-button type="primary" @click="doUpdate('editForm')">确定</el-button>
		</div>
	</el-dialog>

</div>
</body>
<script type="application/javascript">
	new Vue({
		el: '#div',
		data: {
			// 查询参数
			searchFrom: {
				proCode: "",
				proName: ""
			},

			// 列表数据
			tableData: [],

			// 分页参数
			pagination: {
				currentPage: 1,
				pageSize: 3,
				total: 0
			},

			// 查看对话框
			showFormVisible: false,
			showForm: {},
			formLabelWidth: '120px',

			// 编辑对话框
			editFormVisible: false,
			editForm: {},
			rules: {
				proName: [{
					required: true,
					message: '请输入供应商名称',
					trigger: 'blur'
				}]
			}
		},
		methods: {
			// 搜索
			doSearch() {
				this.pagination.currentPage = 1;
				this.doList();
			},

			// 查看
			handleShow(index, row) {
				this.showFormVisible = true;
				this.showForm = {...row}; // 深拷贝避免引用问题
			},

			// 编辑
			handleEdit(index, row) {
				this.editFormVisible = true;
				this.editForm = {...row}; // 深拷贝避免引用问题
			},

			// 更新
			doUpdate(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						axios.put(
								server_url + "/api/provider",
								this.editForm,
								{
									headers: { 'Content-Type': 'application/json' }
								}
						).then(resp => {
							if (resp.data.code === 0) {
								this.$message.success(resp.data.msg);
								this.editFormVisible = false;
								this.$refs[formName].resetFields();
								this.doList();
							} else {
								this.$message.error(resp.data.msg);
							}
						}).catch(err => {
							console.error("更新失败：", err);
						});
					}
				});
			},

			// 删除
			handleDelete(index, row) {
				this.$confirm(
						'此操作将永久删除该数据, 是否继续?', '提示',
						{ confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }
				).then(() => {
					axios.delete(
							`${server_url}/api/provider/${row.id}`
					).then(resp => {
						if (resp.data.code === 0) {
							this.$message.success(resp.data.msg);
							this.pagination.currentPage = 1;
							this.doList();
						} else {
							this.$message.error(resp.data.msg);
						}
					}).catch(err => {
						console.error("删除失败：", err);
					});
				});
			},

			// 分页大小变更
			handleSizeChange(val) {
				this.pagination.pageSize = val;
				this.pagination.currentPage = 1;
				this.doList();
			},

			// 页码变更
			handleCurrentChange(val) {
				this.pagination.currentPage = val;
				this.doList();
			},

			// 获取列表数据
			doList() {
				axios.post(
						server_url + "/api/provider/list",
						{
							currentPage: this.pagination.currentPage,
							pageSize: this.pagination.pageSize,
							proCode: this.searchFrom.proCode,
							proName: this.searchFrom.proName
						},
						{
							headers: { 'Content-Type': 'application/json' }
						}
				).then(resp => {
					if (resp.data.code === 0) {

						this.tableData = resp.data.data.list;
						this.pagination.total = resp.data.data.totalCount;
					} else {

						this.$message.error(resp.data.msg);
					}
				}).catch(err => {
					console.error("获取列表失败：", err);
				});
			}
		},
		mounted() {
			this.doList(); // 页面加载时初始化列表
		}
	});
</script>
</html>